<template>
  <div class="tree">
    <div class="triangle" @click="openAndClose">
      <div :style="triangleSwitch?styleForTriangleOpen:styleForTriangleClose"></div>
    </div>
    <!-- 弹窗表格组件 父元素加display:flex;-->
    <div class="main"  v-show="triangleSwitch">
      <!-- {{dictionaries}} -->
      <div style="padding:10px;width:300px">
        <el-button type="primary" size="mini" icon="el-icon-plus" plain>类型录入</el-button>
        <el-button type="primary" size="mini" icon="el-icon-edit" plain>类型编辑</el-button>
      </div>
      <el-table
        :data="left_data_table"
        border
        size="mini"
        highlight-current-row
        @current-change="leftCurrentChange"
      >
        <el-table-column prop="id" label="编号" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="typeGroupCode" label="类型组代码" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="typeGroupName" label="输入组名" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createName" label="指定名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createBy" label="创建人" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="sysOrgCode" label="组织机构" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="sysCompanyCode" label="组织机构代码" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
             <span type="danger" size="mini" style="color:#E21918;cursor: pointer;"  @click.stop="handleDelete(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
  </div>
</template>
<script>
export default {
  props: ["leftHurdleData"],
  data() {
    return {
      //css
      //组件开关
      triangleSwitch: true,
      //组件打开时三角型箭头朝右为打开状态
      styleForTriangleOpen: {
        "border-right": "16px solid #CBCBCB",
        "border-top": "8px solid transparent",
        "border-bottom": "8px solid transparent",
        transition: "0.2s"
      },
      //组件关闭时三角形箭头朝左为关闭状态
      styleForTriangleClose: {
        "border-left": "16px solid #CBCBCB",
        "border-top": "8px solid transparent",
        "border-bottom": "8px solid transparent",
        transition: "0.2s"
      },
      //..
      filterText: "",
      //treeVirtual: [],
      dictionaries: [
        {
          EN: "id",
          CN: "编号",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "type",
          CN: "类型名称",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "code",
          CN: "类型编码",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        }
      ],
      left_data_table: [
        {
          id: 1,
          type: "类型名称1",
          code: "类型编码1"
        }
      ],
      defaultProps: {
        children: "child",
        label: "name"
      }
    };
  },
  created() {
    // this.treeVirtual = JSON.parse(JSON.stringify(this.treeData));
    // console.log("树形图传入数据！");
    // console.log(this.treeVirtual);
    // console.log(this.treeData);
    this.left_data_table = JSON.parse(JSON.stringify(this.leftHurdleData));
    console.log("yyyyyyyyyyyyyyyyyyyyyyyy");
    console.log(this.left_data_table);
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods: {
    //单选
    leftCurrentChange(val){
      //  console.log(val)
      this.$emit("choiceReturn",val)
    },
    //删除
    handleDelete(row) {
      console.log('删除')
      this.$emit("forDeleteData",row)
    },
    //开关组件
    openAndClose() {
      this.triangleSwitch = !this.triangleSwitch;
    }
    // getCheckedNodes(val) {
    //   console.log(val);
    //   this.$emit("treeOutput", val);
    // }
  }
};
</script>
<style lang="scss" src="../../../styles/triangle.scss" scoped></style>
